<template>
  <div class="g-dialog-panel setting">
    <div class="g-dialog-title">
      <span>Setting</span>
      <div class="g-clickable close" @click="close">
        <i class="iconfont icon-close"></i>
      </div>
    </div>
    <div class="setting-item slippage">
      <div class="setting-item__title">
        <span>Slippage tolerance</span>
        <ToolTip text="this is test" />
      </div>
      <div class="setting-item__options">
        <div class="list">
          <div
            v-for="(item, i) in slippageList"
            :key="i"
            class="g-clickable"
            :class="{ on: item.code === +slippage }"
            @click="slippage = item.code"
          >
            <span>{{ item.name }}</span>
          </div>
        </div>
        <div class="label">
          <span>{{ slippage }}</span>
          <i>%</i>
        </div>
      </div>
      <div class="setting-item__range">
        <input
          type="range"
          :min="slippageMin"
          :max="slippageMax"
          :step="slippageStep"
          v-model="slippage"
          @change="changeSlippage"
        />
      </div>
    </div>
    <div class="setting-item gas-price" v-if="false">
      <div class="setting-item__title">
        <span>GasPrice</span>
        <ToolTip text="this is test" />
      </div>
      <div class="setting-item__options">
        <div class="list">
          <div
            v-for="(item, i) in gasPriceList"
            :key="i"
            class="g-clickable"
            :class="{ on: item.code === +gasPrice }"
            @click="gasPrice = item.code"
          >
            <span>{{ item.name }}</span>
          </div>
        </div>
        <div class="label">
          <span>{{ gasPrice }}</span>
          <i>Gwei</i>
        </div>
      </div>
      <div class="setting-item__range">
        <input
          type="range"
          :min="gasPriceMin"
          :max="gasPriceMax"
          :step="gasPriceStep"
          v-model="gasPrice"
          @change="changeGasPrice"
        />
      </div>
    </div>
    <div class="setting-item show-more" v-if="false">
      <div class="setting-item__title">
        <span>Show more</span>
        <ToolTip text="this is test" />
        <div class="end">
          <SwitchBase v-model="showMore" :min="true" @input="changeShowMore" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SwapLabel from "@/components/SwapLabel";
import ToolTip from "@/components/common/ToolTip";
import SwitchBase from "@/components/common/SwitchBase";
import store from "@/store";

export default {
  components: {
    ToolTip,
    SwapLabel,
    SwitchBase,
  },
  data() {
    return {
      slippage: 0.5,
      slippageMin: 0.1,
      slippageMax: 10,
      slippageStep: 0.1,
      slippageList: [
        {
          code: 0.5,
          name: "0.5%",
        },
        {
          code: 1,
          name: "1%",
        },
        {
          code: 3,
          name: "3%",
        },
      ],
      gasPrice: 5,
      gasPriceMin: 1,
      gasPriceMax: 15,
      gasPriceStep: 1,
      gasPriceList: [
        {
          code: 5,
          name: "5Gwei",
        },
        {
          code: 10,
          name: "10Gwei",
        },
        {
          code: 15,
          name: "15Gwei",
        },
      ],
      showMore: false,
    };
  },
  mounted() {
    this.slippage = store.state.tolerance || 0.5;
    this.gasPrice = store.state.gasPrice || 5;
    this.showMore = store.state.showMore === true;
  },
  methods: {
    close() {
      this.$emit("close");
    },
    changeSlippage() {
      store.commit("SET_TOLERANCE", this.slippage);
    },
    changeGasPrice() {
      store.commit("SET_GASPRICE", this.gasPrice);
    },
    changeShowMore() {
      store.commit("SET_SHOWMORE", this.showMore);
    },
  },
};
</script>

<style lang="scss" scoped>
.setting {
  width: 450px;
}
.setting-item {
  padding-top: 20px;
  &__title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: flex-start;

    span {
      font-size: 18px;
      font-family: "Roboto Medium";
      color: var(--color-content);
    }

    .end {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }

  &__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;

    .label {
      width: 160px;
      display: flex;
      align-items: baseline;
      justify-content: flex-end;

      span {
        font-size: 42px;
        font-family: "Roboto Bold";
        line-height: 1;
      }
      i {
        font-size: 24px;
        font-family: "Roboto Bold";
        line-height: 1;
        margin-left: 3px;
        color: var(--color-content);
      }
    }
    .list {
      flex: 1;
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 1fr 1fr 1fr;

      div {
        height: 30px;

        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        border: 3px solid var(--color-grey);
        border-radius: 15px;
        box-sizing: border-box;

        transition: all .3s ease;
        &.on {
          background-color: var(--color-grey);
          span {
            background: none;
            color: var(--color);
          }
        }

        span {
          font-size: 12px;
          font-family: "Roboto Medium";
          color: var(--color-content);
          display: inline-block;
        }
      }
    }
  }

  &__range {
    margin-bottom: 10px;
    input {
      width: 100%;
      border: none;
    }
  }
}
.slippage {
  padding-top: 30px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
</style>
